<template>
  <div class="component-detail">
    <el-tabs v-model="activePane" type="border-card" @tab-click="handleClick">
      <template v-for="(item, index) in tabPanes">
        <el-tab-pane
          v-if="item.isShow"
          :key="index"
          :label="item.label"
          :name="item.name"
        >
          <!-- 自定义标签内容 -->
          <template v-if="item.name === 'logDetail'" #label>
            <span style="display: flex; align-items: center">
              <span>日志详情</span>
              <i :style="isLoading? '' : 'visibility:hidden'" class="el-icon-loading" />
            </span>
          </template>

          <div v-if="item.name === 'logDetail'">
            <LogDetail
              :ref="item.name"
              :component-id="componentInfo.componentId"
              :his-log-drawer="hisLogDrawer"
              @finish-loading-log="finishLogLoading"
            />
          </div>

          <div v-else-if="item.name === 'stepConfig'">
            <StepConfig
              :ref="item.name"
              :component-id="componentInfo.componentId"
              @detail-config-build="detailConfigBuild"
              @detail-config-cancel="detailConfigCancel"
            />
          </div>

          <div v-else-if="item.name === 'envInfo'">
            <DetailEnvInfo
              :ref="item.name"
              :component-id="componentInfo.componentId"
              @detail-config-build="detailConfigBuild"
              @detail-config-cancel="detailConfigCancel"
            />
          </div>

          <div v-else>
            <SQLFiles
              v-if="showSqlFile"
              :ref="item.name"
              :component-info="componentInfo"
              @detail-config-build="detailConfigBuild"
              @detail-config-cancel="detailConfigCancel"
            />
          </div>
        </el-tab-pane>
      </template>
    </el-tabs>
    <el-button
      v-if="activePane === 'logDetail'"
      type="text"
      style="position: absolute;right:26px;top:48px;"
      @click="lookForHisLogs"
    >
      <i class="iconfont icon-lishijilu" />
      历史记录
    </el-button>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import LogDetail from '@/views/projectManage/projectList/component/LogDetail.vue'
import DetailEnvInfo from '@/views/projectManage/projectList/component/DetailEnvInfo.vue'
import SQLFiles from '@/views/projectManage/projectList/component/SQLFiles.vue'
import StepConfig from '@/views/projectManage/projectList/component/StepConfig.vue'

export default {
  name: 'ComponentDetail',
  components: { SQLFiles, DetailEnvInfo, LogDetail, StepConfig },
  props: {
    // 组件ID
    componentInfo: {
      type: Object,
      required: true
    }
  },
  emit: ['detail-config-cancel', 'detail-config-build'],
  data() {
    return {
      activePane: 'logDetail',
      tabPanes: [{
        label: '日志详情',
        name: 'logDetail',
        isShow: true
      }, {
        label: '步骤设置',
        name: 'stepConfig',
        isShow: true
      }, {
        label: '环境信息',
        name: 'envInfo',
        isShow: true
      }, {
        label: 'SQL文件',
        name: 'sqlFiles',
        isShow: this.componentInfo.compType === this.$const.COMP_TYPE_BACKEND
      }],
      isLoading: false,
      hisLogDrawer: false,
      showSqlFile: false
    }
  },
  computed: {
    ...mapGetters([
      'detailConfigs',
      'buildStep'
    ])
  },
  methods: {
    lookForHisLogs() {
      this.$refs.logDetail[0].showDrawer()
    },
    // 日志推送操作
    finishLogLoading(val) {
      this.isLoading = !val
    },

    detailConfigCancel() {
      this.$emit('detail-config-cancel', false)
    },

    detailConfigBuild() {
      const cfg = this.detailConfigs[this.componentInfo.id]
      const buildData = {
        projectId: this.componentInfo.projectId,
        compBuildInfos: [{
          componentId: this.componentInfo.componentId,
          branchTag: this.componentInfo.tag === '-' ? '' : this.componentInfo.tag,
          envIdList: cfg['upgradeEnvIds'],
          sqlList: cfg['sqlFiles'],
          stepOrders: cfg['stepOrders']
        }]
      }
      this.$emit('detail-config-build', buildData)
    },
    handleClick() {
      // 切换到其他面板时，保存未激活的面板，调用子组件的saveCfg方法，保存已经编辑过的步骤、环境和sql等信息
      this.tabPanes.forEach(item => {
        const paneName = item.name
        if (paneName === 'logDetail') {
          return
        }
        const subRef = this.$refs[paneName]
        if (paneName !== this.activePane && subRef) {
          subRef[0].saveCfg()
        }
      })
      // sql文件加载数据
      this.showSqlFile = this.activePane === 'sqlFiles'
    }
  }
}
</script>

<style>

</style>
